<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
  </head>
  <body>
    <div id="test"></div>

    <script type="text/babel">
      class Demo extends React.Component {
        state = {
          userValue: "",
          passValue: "",
          obj: {
            name: "张三",
            age: 18,
            sex: "男",
          },
        };

        // formChange = (str) => {
        //   return (e) => {
        //     this.setState({
        //       [str]: e.target.value,
        //     });
        //   };
        // };
        formChange = (e, str) => {
          this.setState({
            [str]: e.target.value,
          });
        };

        render() {
          return (
            <div>
              <form>
                <div>
                  <label htmlFor="username">用户名</label>
                  <input
                    type="text"
                    id="username"
                    onChange={(e) => this.formChange(e, "userValue")}
                  />
                </div>
                <div>
                  <label htmlFor="password">密码</label>
                  <input
                    type="password"
                    id="usernamepassword"
                    onChange={(e) => this.formChange(e, "userValue")}
                  />
                </div>
                <button>提交</button>
              </form>
              <ul>
                {Object.entries(this.state.obj).forEach((item, index) => {
                  item.map((item, index) => {
                    console.log(item);
                    return <li key={index}>{item}</li>;
                  });
                })}
              </ul>
            </div>
          );
        }
      }

      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>
